<template>
<div>
    <div class="nav">
        <ul class="nav-list">
            <!--eslint-disable-next-line-->
            <!-- <li class="item" v-for='(item, index) in navList' :class="{'active': nowIndex===index}" @click="tabClick(index)">
                {{item.name}}
            </li> -->
            <div style="hight:100%; float:left">
                我的文章
            </div>
            <!-- <div class='item'></div> -->
            <router-link to="/editor/" style="hight:100%; float:right">
                <img src="../../assets/themes/images/write.png" height="25" width="25" />
            </router-link>
        </ul>
    </div>
    <div class="cell_dashed"></div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item" :title="item.title">
                <router-link :to="{path:'/content/', query:{id:item.content_id}}">
                    <!-- {{ item['title'] }} -->
                    {{ item['intro'] }}
                </router-link>
            </van-cell>
        </van-list>
    </van-pull-refresh>
    
</div>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';
import 'vant/lib/list/style';
import { PullRefresh } from 'vant';
import 'vant/lib/pull-refresh/style'
import { Cell } from 'vant';
import 'vant/lib/cell/style'

Vue.use(Cell);
Vue.use(PullRefresh)
Vue.use(List);
export default {
    components:{
    },
    mounted: function(){
        console.log(localStorage.getItem('userstatus')) // 如果登录了，这里就会获取到ok，否则会是null
        if (JSON.parse(localStorage.getItem('userstatus')) != 'login'){
            this.$router.push({path:'/no_login/'})
        }
    },
    data() {
        return {
            list:[],
            loading: false,
            finished: false,
            refreshing: false,
            data_lenth: 0,
        }
    },
    
    computed: {
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                // for (let i = 0; i < 10; i++) {
                //     this.list.push(this.list.length + 1);
                // }
                // this.loading = false;
                // if (this.list.length >= 40) {
                //     this.finished = true;
                // }
                this.$axios.get('get_data/find_index/',{
                    params:{
                        "session_id":localStorage.getItem('sessionid'),
                        "data_lenth":this.data_lenth,
                    }
                }).then(res=>{
                        if (res.data['data'].length == 0) {
                            this.finished = true
                        }
                        else{
                            // this.list.contact(res.data['data'])
                            for (let i in res.data['data']) {
                                this.list.push(res.data['data'][i])
                            }
                            this.data_lenth = this.data_lenth + this.list.length
                        }
                    })
                this.loading = false;
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
            this.data_lenth = 0
        },
    },
    // mounted() {
    //   console.log('Current Swiper instance object', this.swiper1)
    //   this.swiper1.slideTo(0, 3000, false)
    // },
    
  }
</script>

<style scoped>
    .nav {
        /* margin-bottom: 20px; */
        /* box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.3); */
        height:48px;
    }

    /* 分割线 */
    .cell_dashed{
        border-bottom:1px dashed #999999;
        height: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
</style>
